<html>
	<head>

		<title></title>
		<link rel="stylesheet" href="style.css">	
		<script src="jquery-1.11.0.js"></script>
		<script src="gen.js"></script>
		<script>
			//makes a synchronous call to the page u and return the 
			//result as object
			var t;
			function syncAjax(u){
				var obj=$.ajax(
					{url:u,
					 async:false
					 }
				);
				return $.parseJSON(obj.responseText);
				
			}
			
			//edit a community
			function edit(obj,id,event){
				var r=getCommunity(id);
				if(r.result==0){
					//show error message
					$("divStatus").text(r.message);
					return;
				}
				//get the data from object r and put it in the form
				$("#community_name").prop("value",r.community.communityName);
				$("#longitude").prop("value",r.community.longitude);
				$("#latitude").prop("value",r.community.latitude);
				$("#population").prop("value",r.community.population);
				$("#household").prop("value",r.community.household);
				$("#subdistrict_id").prop("value",r.community.subdistrict_id);
				
				//show the form
				
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);
				//display the form
				$("#divEdit").fadeIn(30);
			}
			
			//add a community
			function add(obj,event){
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divAdd").css("top",y);
				$("#divAdd").css("left",x);
				//display the form
				$("#divAdd").fadeIn(30);
			}
			
			//delete a community
			function Delete(obj,id,event){
				var r=getCommunity(id);
				if(r.result==0){
					//show error message
					$("divStatus").text(r.message);
					return;
				}
				//get the data from object r and put it in the form
				$("#community_id").prop("value",r.community.id);
			
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divDelete").css("top",y);
				$("#divDelete").css("left",x);
				//display the form
				$("#divDelete").fadeIn(30);
			}
			
			//returns a result object for one vaccine 
			function getCommunity(id){
				t=id;
				var u="community_action.php?cmd=1&id="+t;
				return syncAjax(u);
			}
			
			//refresh the page
			function timedRefresh(timeoutPeriod) {
				setTimeout("location.reload(true);",timeoutPeriod);
			}
			
			//makes asynchronous call to the save page
			function save(){
				//complete the URL
				var cn=document.getElementById("community_name").value;
				var clo=document.getElementById("longitude").value;
				var cla=document.getElementById("latitude").value;
				var cp=document.getElementById("population").value;
				var ch=document.getElementById("household").value;
				var cs=document.getElementById("subdistrict_id").value;
				var u="community_action.php?cmd=3&id="+t+"&cn="+cn+"&clo="+clo+"&cla="+cla+"&cp="+cp+"&ch="+ch+"&cs="+cs;		
				r=syncAjax(u);
				$.getJSON(u,saveDone);
				cancel();
				timedRefresh(10);
			}
			
			function rotate_style(row){
				if(row%2==0){
				return " class='row1'";
				}else{
				return " class='row2'";
				}	
			}
			
			//get the subdistrict name
			function get_subdistrict(id){
			var v="subdistrict_action.php?cmd=1&id="+id;	
			s=syncAjax(v);
			var a= s.subdistrict.subdistrict_name;
			return a;
			}
			
			//DISPLAY THE COMMUNITIES DETAILS IN A TABLE
			function latest_table(){
				var u="community_action.php?cmd=2";	
				r= syncAjax(u);		
				var table ="<table class='reportTable'><tr class='header'><td>community Name</td><td>Sub district</td><td>Population</td><td>household</td><td>Latitude</td><td>Longitude</td><td>Edit</td><td>Delete</td></tr>";
				
				for(var i=0;i<r.communities.length;i++){

					table+="<tr"+rotate_style(i)+"><td>"+r.communities[i].community_name +"</td><td>"
					+get_subdistrict(r.communities[i].subdistrict_id) +"</td><td>"+r.communities[i].population +"</td><td>"
					+r.communities[i].household +"</td><td>"+r.communities[i].latitude +"</td><td>"+r.communities[i].longitude +"</td><td>"+
					"<span class='hotspot' onclick='edit(this,"+r.communities[i].community_id+",event)'>edit</span></td><td>"+
					"<span class='hotspot' onclick='Delete(this,"+r.communities[i].community_id+",event)'>delete</span></td></tr>";
				}
				table +="</table>";
				if(document.getElementById("divContent")==null){
					console.log("Not yet initialized");
				}
				else {
				document.getElementById("divContent").innerHTML=table;
			}
			}
			
			//search the list of community
			function search_table(r){
				console.log(r);	
				var table ="<table class='reportTable'><tr class='header'><td>community Name</td><td>Sub district</td><td>Population</td><td>household</td><td>Latitude</td><td>Longitude</td><td>Edit</td><td>Delete</td></tr>";

				if(r.communities != null){
				for(var i=0;i<r.communities.length;i++){
					table+="<tr"+rotate_style(i)+"><td>"+r.communities[i].community_name +"</td><td>"
					+get_subdistrict(r.communities[i].subdistrict_id) +"</td><td>"+r.communities[i].population +"</td><td>"
					+r.communities[i].household +"</td><td>"+r.communities[i].latitude +"</td><td>"+r.communities[i].longitude +"</td><td>"+
					"<span class='hotspot' onclick='edit(this,"+r.communities[i].community_id+",event)'>edit</span></td><td>"+
					"<span class='hotspot' onclick='Delete(this,"+r.communities[i].community_id+",event)'>delete</span></td></tr>";
				}
				table +="</table>";
				if(document.getElementById("divContent")==null){
					console.log("Not yet initialized");
				}
				else {
				$("#divStatus").text("Result found");
				document.getElementById("divContent").innerHTML=table;
				}
			}
				else{
				 $("#divStatus").text("No result found");
				 $("#divContent").hide();
				}
			}
			
			//the actual search of the list 
			function search(){
				var tx=document.getElementById("txtSearch").value;
				console.log(tx);
				var u = "community_action.php?cmd=6&cn="+tx;
				r=syncAjax(u);
				search_table(r);
			}
			//save an added community
			function save_add(){
				//complete the URL
				var cn=document.getElementById("c_n").value;
				var clo=document.getElementById("c_lo").value;
				var cla=document.getElementById("c_la").value;
				var cp=document.getElementById("c_p").value;
				var ch=document.getElementById("c_h").value;
				var cs=document.getElementById("c_s").value;
				var u="community_action.php?cmd=5&cn="+cn+"&clo="+clo+"&cla="+cla+"&cp="+cp+"&ch="+ch+"&cs="+cs;	
				console.log(u);
				r=syncAjax(u);
				cancel_add();
				timedRefresh(10);
			}
			
			//delete a community
			function delete_now(){
				//complete the URL
				var u="community_action.php?cmd=4&id="+t;	
				r=syncAjax(u);
				cancel_delete();
				timedRefresh(10);
			}
			
			
			function saveDone(data){
				alert(data);
			}
			
			//cancels editing a community
			function cancel(){
				//fade out the form in half a second
				$("#divEdit").fadeOut(30);
			}
			
			//cancels the addition of a new community
			function cancel_add(){
				//fade out the form in half a second
				$("#divAdd").fadeOut(30);
			}
			
			//cancels the deletion of a community
			function cancel_delete(){
				//fade out the form in half a second
				$("#divDelete").fadeOut(30);
			}
			
		</script>
		<?php
			include("subdistrict.php");
			$obj = new subdistrict();
		?> 
		
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2" id="pageheader">
					Health Information System
				</td>
			</tr>
			<tr>
				<td id="mainnav">
					<div class="menuitem">location</div>
					<div class="menuitem">opd cases</div>
					<div class="menuitem">health promotion</div>
					<div class="menuitem">nutrition</div>
					<div class="menuitem">child welfare</div>
					<div class="menuitem">family planning</div>
					<div class="menuitem"><a href="logout.php">logout<a></div>
				</td>
				<td id="content">
					<div id="divPageMenu">
						<span class="menuitem" ><a href="index_users.php">Users</a></span>
						<span class="menuitem" ><a href="index_community_list.php">Communities</a></span>
						<span class="menuitem" ><a href="index_subdistrict_list.php">Sub districts</a></span>
						<span class="menuitem" ><a href="index_district_list.php">Districts</a></span>
						<span class="menuitem" onclick="add(this,event)">Add community</span>
						<input type="text" id="txtSearch">
						<span class="menuitem" onclick="search()">search</span>	
					</div>
					<div id="divStatus" class="status">
					</div>
					<div id="divContent">
						<script>
						latest_table();
						</script>
					</div>
				</td>
			</tr>
		</table>
		<div id="divEdit" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">Community Name: </td>
						<td class="field"><input type="text" value="<?php echo $row['community_name'] ?>" id="community_name" ></td>
					</tr>
					<tr>
						<td class="label">Longitude:</td> 
						<td class="field"><input type="text" value="" id="longitude" >
						</td>
					</tr>
					<tr>
						<td class="label">Latitude:</td> 
						<td class="field"><input type="text" value="" id="latitude" >
						</td>
					</tr>
					<tr>
						<td class="label">Population:</td> 
						<td class="field"><input type="text" value="" id="population" >
						</td>
					</tr>
					<tr>
						<td class="label">Household:</td> 
						<td class="field"><input type="text" value="" id="household" >
						</td>
					</tr>
					<tr>
						<td class="label">Subdistrict:</td>
						<td class="field">
						<?php
							echo "<select name='subdistrict_id' id='subdistrict_id'>";
							if(!$obj->get_all_subdistrict()){
								echo "Unable to get subdistricts";
							}
							$row = $obj->fetch();
							while($row){
								echo "<option value='$row[subdistrict_id]' selected>$row[subdistrict_name] </option>";
								$row = $obj->fetch();
							}
							echo "</select>"; 
							?> 
						</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="save()" >
							<input type="button" value="cancel" onclick="cancel()" >
						</td>
					</tr>
			</table>			
	</div>
	
	<div id="divAdd" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">Community Name: </td>
						<td class="field"><input type="text" id="c_n" ></td>
					</tr>
					<tr>
						<td class="label">Longitude:</td> 
						<td class="field"><input type="text" id="c_lo" >
						</td>
					</tr>
					<tr>
						<td class="label">Latitude:</td> 
						<td class="field"><input type="text" id="c_la" >
						</td>
					</tr>
					<tr>
						<td class="label">Population:</td> 
						<td class="field"><input type="text" id="c_p" >
						</td>
					</tr>
					<tr>
						<td class="label">Household:</td> 
						<td class="field"><input type="text" id="c_h" >
						</td>
					</tr>
					<tr>
						<td class="label">Subdistrict:</td>
						<td class="field">
						<?php
							echo "<select name='c_s' id='c_s'>";
							if(!$obj->get_all_subdistrict()){
								echo "Unable to get subdistricts";
							}
							$row = $obj->fetch();
							while($row){
								echo "<option value='$row[subdistrict_id]' selected>$row[subdistrict_name] </option>";
								$row = $obj->fetch();
							}
							echo "</select>"; 
							?>
							</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="save_add()" >
							<input type="button" value="cancel" onclick="cancel_add()" >
						</td>
					</tr>
			</table>		
	</div>
	
	<div id="divDelete" class="popupForm">
		<table class="tableForm" >
				Are you sure you want to delete?
					<tr>
						<td class="label"></td>
						<td>
							<input type="button" value="YES" onclick="delete_now()" >
							<input type="button" value="NO" onclick="cancel_delete()" >
						</td>
					</tr>
			</table>		
	</div>
	</body>
</html>	